<template>
    <div class='content'>
      <!-- <van-swipe class="my-swipe" :height="150" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerItems" :key="index" @click="goUrl(item)">
          <img :src="'https://video.z286.com.cn/boc/sys/common/static/' + item.icon">
        </van-swipe-item>
      </van-swipe> -->
      <!-- <div class="tit">服务专区</div> -->
      <div class="tab">
        <div class="item">
          <div class="item-box" @click="goUrl('http://wh3z.yksmart3.com:8188/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA013')">
            <div class="right-name">威海市第三中学</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box" @click="goUrl('http://wh4z.yksmart3.com:8288/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA014')">
            <div class="right-name">威海市第四中学</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box" @click="goUrl('http://whhwy.yksmart3.com:8288/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA015')">
            <div class="right-name">威海市望海园中学</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box" @click="goUrl('http://wh1z.yksmart3.com:8588/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA011')">
            <div class="right-name">威海市第一中学</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box" @click="goUrl('http://wh2z.yksmart3.com:8688/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA012')">
            <div class="right-name">威海市第二中学</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box" @click="goUrl('http://ywdc.yktsv.net/hbweixin/app/index.html#/onlineOrdering')">
            <div class="right-name">威海市艺术学校</div>
          </div>
        </div>
        <div class="item">
          <div class="item-box" @click="goUrl('http://whflxx.yksmart3.com:8187/weixin/getWxLoginPage.action')">
            <div class="right-name">凤林中学</div>
          </div>
        </div>
      </div>
      <!-- <van-grid :border="false" :column-num="3">
        <van-grid-item @click="goUrl('http://wh3z.yksmart3.com:8188/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA013')">
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div class="tit">威海市第三中学</div>
        </van-grid-item>
        <van-grid-item @click="goUrl('http://wh4z.yksmart3.com:8288/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA014')">
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div class="tit">威海市第四中学</div>
        </van-grid-item>
        <van-grid-item @click="goUrl('http://whhwy.yksmart3.com:8288/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA015')">
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div class="tit">威海市望海园中学</div>
        </van-grid-item>
        <van-grid-item @click="goUrl('http://wh1z.yksmart3.com:8588/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA011')">
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div class="tit">威海市第一中学</div>
        </van-grid-item>
        <van-grid-item @click="goUrl('http://wh2z.yksmart3.com:8688/weixin/getWxLoginPage.action?_g_id=3C50E0296E13C2467986A7931F8EA012')">
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div class="tit">威海市第二中学</div>
        </van-grid-item>
        <van-grid-item @click="goUrl('http://ywdc.yktsv.net/hbweixin/app/index.html#/onlineOrdering')">
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div class="tit">威海市艺术学校</div>
        </van-grid-item>
      </van-grid> -->
    </div>
</template>

<script>
import axios from 'axios'
import { Button, Swipe, SwipeItem, Grid, GridItem, Image as VanImage, NavBar } from 'vant';
export default {
    components: {
      [Button.name]: Button,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
      [VanImage.name]: VanImage,
      [NavBar.name]: NavBar
    },
    data() {
      return {
        items: [],
        bannerItems: [],
      };
    },
    computed: {},
    created() {
      // this.getList()
    },
    methods: {
      getList() {
        axios.post('https://video.z286.com.cn/boc/externalAccess/iconList', {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        .then(res=>{
          console.log(res);
          const list = []
          const banner = []
          res.data.result.forEach(item => {
            if (item.type === 'button') {
              list.push(item)
            } else if (item.type === 'banner') {
              banner.push(item)
            }
          })
          this.items = list
          this.bannerItems = banner
        })
      },
      goUrl(url) {
        window.location.href = url
      }
    }
}
</script>
<style>
    #app{
        min-height: 100%;
        height: 100%;
    }
</style>
<style lang="less" scoped>
  .content{
    height: 100%;
    background: url("~path_img/login-bg.jpg") bottom no-repeat;
    background-size: cover;

    // .tit{
    //   font-size: 14px;
    //   text-align: center;
    //   margin-top: .2rem;
    // }

    .my-swipe {
      .van-swipe-item {
        img{
          width: 100%;
          height: 150px;
          object-fit: cover;
        }
      }
    }

    .tit{
      text-align: left;
      font-size: 18px;
      padding: .55rem;
    }

    .tab{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      text-align: left;
      padding: 0 .6rem;
      margin-top: .6rem;

      .item{
        display: inline-block;
        width: 48%;
        height: auto;
        // background: url("~path_img/is-index-bg-btn.png") center no-repeat;
        // background-size: 100% 100%;
        background: #091e95;
        margin-bottom: .4rem;
        border-radius: 5px;
        .item-box{
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: .4rem;

          img{
            width: 40px;
            height: 40px;
            margin-right: .4rem;
          }

          .right-name{
            font-size: 16px;
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>